<template>
  <div class="chartContent">
    <div ref="chartRef" id="myChart_r" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch, nextTick, reactive, getCurrentInstance, markRaw, onUnmounted} from "vue";
import * as echarts from 'echarts';
import { useMenuList } from '@/pinia/menu.js'
import { debounce } from 'lodash'

const props = defineProps({
  chartData: Array
})

let chartData = ref([])
const chartRef = ref()
const chartInit = ref()
const getChartData = () => {
  // 边框颜色
  let _color = [
    'rgba(255, 226, 179, 1)',
    'rgba(213, 255, 184, 1)',
    'rgba(255, 250, 186, 1)',
    'rgba(240, 204, 255, 1)',
    'rgba(212, 228, 255, 1)'
  ]
  // 渐变色 起始颜色
  let _start = [
    'rgba(255, 239, 227, 1)',
    'rgba(242, 252, 235, 1)',
    'rgba(252, 251, 235, 1)',
    'rgba(254, 245, 255, 1)',
    'rgba(239, 235, 255, 1)'
  ]
  // 渐变色 结束颜色
  let _end = [
    'rgba(255, 241, 217, 1)',
    'rgba(242, 252, 235, 1)',
    'rgba(252, 251, 235, 1)',
    'rgba(248, 232, 255, 1)',
    'rgba(242, 248, 255, 1)'
  ]

  let newData = [{
    children: []
  }]
  chartData.value.forEach((item, index) => {
    Reflect.set(item, 'itemStyle', {})
    item.itemStyle = {
      color: {
        type: 'linear',          // 渐变色类型
        colorStops: [{
          offset: 0,// 0% 处的颜色
          color: _start[index % 5] // 随机遍历的色值
        }, {
          offset: .7, // 70% 处的颜色
          color: _end[index % 5] // 最终趋向的色值固定这里就写死
        }],
      },
      borderWidth: 1,
      borderColor: _color[index % 5],

    }
  })

  newData[0].children = chartData.value
  drawChart(newData)
}

const drawChart = (newData, newLinks) => {
  chartInit.value = markRaw(echarts.init(chartRef.value))
  let option = {
    series: [
      {
        squareRatio: 0.5 * (1 + Math.sqrt(5)), //	期望矩形长宽比率,布局计算时会尽量向这个比率靠近,默认黄金比
        left: 95,
        right: 95,
        type: 'treemap',
        breadcrumb: {
          show: false,
        },
        visibleMin: 200,
        nodeClick: false,
        roam: false,
        itemStyle: {
          borderRadius: 20,
          gapWidth: 10,
          borderWidth: 1,
        },
        emphasis :{ //鼠标移动到上面的效果
          disabled: true,
        },
        orient: 'LR',
        label: {
          verticalAlign: 'middle',
          align: 'center',
          position: 'inside',
          lineHeight:16,
          fontSize: 13,
          color: 'rgba(32, 32, 32, 1)',
          formatter: function (params) {
            let arr = [
              `${params.data.name}`,
              `${params.data.value} 个`
            ]
            return arr.join('\n');
          },
        },
        data: newData,
      }
    ]
  };

  chartInit.value.setOption(option, true);
}

watch(() => props.chartData, (newVal, oldVal) => {
  chartData.value = props.chartData.map(item => {
    return {
      id: item.id,
      name: item.tagName,
      value: item.count * 1,
    }
  })
  nextTick(() => {
    getChartData()
  })
}, { immediate: true })

onMounted(() => {
  window.addEventListener('resize', resize)
})

const resize = () => {
  chartInit.value && debounce(chartInit.value.resize.bind(), 300)({
    animation: {
      duration: 700,
      easing: 'linear',
    }
  })
}

watch(() => useMenuList().collapseStatus, (newVal, oldVal) => {
  nextTick(() => resize())
})

onUnmounted(() => {
  chartInit.value && chartInit.value.dispose()
  chartInit.value = null
  window.removeEventListener('resize', () => resize())
})
</script>

<style lang="scss" scoped>
.chartContent {
  width: 100%;
  height: 100%;
}
</style>
